<template>
  <div class="addShare">
    <top></top>
    <div class="addShare1">
      <div class="addShare2">
        <div class="addShare3">
          <el-form :model="form" :rules="rules" ref="ruleForm">
            <el-row :gutter="10">
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <span class="search-title">
                      学校:
                      </span>
                  <div style="width:100%">
                    <el-form-item prop="schoolId" style="margin-bottom:0">
                      <el-select filterable @change="changeSchool" size="mini" v-model="form.schoolId" placeholder="请选择">
                        <el-option v-for="(item,index) in school" :key="index"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </div>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <span class="search-title">
                      餐厅:
                      </span>
                  <div style="width:100%">
                    <el-form-item prop="restId" style="margin-bottom:0">
                      <el-select multiple filterable size="mini" v-model="form.restId" placeholder="请选择">
                        <el-option v-for="(item,index) in restaurant" :key="index"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </div>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <span class="search-title">
                      类型:
                      </span>
                  <div style="width:100%">
                    <el-form-item prop="restId" style="margin-bottom:0">
                      <el-select filterable size="mini" v-model="form.typeId" placeholder="请选择">
                        <el-option v-for="(item,index) in type" :key="index"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </div>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <span class="search-title">
                      名称:
                      </span>
                  <div style="width:100%">
                    <el-form-item prop="name" style="margin-bottom:0">
                        <el-input v-model="form.name" size="mini" placeholder="请输入名称" autocomplete="off"></el-input>
                    </el-form-item>
                  </div>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <span class="search-title">
                      窗口:
                      </span>
                  <div style="width:100%">
                    <el-form-item prop="address" style="margin-bottom:0">
                        <el-input v-model="form.address" size="mini" placeholder="请输入窗口" autocomplete="off"></el-input>
                    </el-form-item>
                  </div>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <span class="search-title">
                      营业时间:
                      </span>
                  <div style="width:100%">
                    <el-form-item prop="open" style="margin-bottom:0">
                        <el-input v-model="form.open" size="mini" placeholder="请输入营业时间" autocomplete="off"></el-input>
                    </el-form-item>
                  </div>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <span class="search-title">
                      评分:
                      </span>
                  <div style="width:100%">
                    <el-form-item prop="star" style="margin-bottom:0">
                      <el-rate v-model="form.star"></el-rate>
                    </el-form-item>
                  </div>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <span class="search-title">
                      图片:
                      </span>
                  <div style="width:100%">
                    <el-form-item prop="image" style="margin-bottom:0;margin-top:10px;margin-bottom:10px">
                      <el-upload
                      :file-list="fileList"
                      ref="upload"
                      :action="uploadImageUrl()"
                      accept="image/*"
                      :multiple="false"
                      :limit="10"
                      :before-upload="beforeAvatorUpload"
                      list-type="picture-card"
                      :on-preview="handlePictureCardPreview"
                      :on-exceed="handleExceed"
                      :on-success="handleAvatorSuccess"
                      :on-remove="handleRemove">
                      <i class="el-icon-plus"></i>
                      </el-upload>
                      <el-dialog :visible.sync="dialogVisible">
                          <img width="100%" :src="dialogImageUrl" alt="">
                      </el-dialog>
                    </el-form-item>
                  </div>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <span class="search-title">
                      内容:
                      </span>
                  <el-form-item prop="content" style="margin-bottom:0">
                    <quill-editor ref="myQuillEditor" :options="editorOption"
                    v-model="form.content"/>
                    <el-upload class="Quill-uploader" :show-file-list="false" accept="image/*" v-show="0" ref="updateUpload" :multiple="false" :action="uploadImageUrl()"
                        :on-success="handleQillSuccess">
                    </el-upload>
                  </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <el-button icon="el-icon-upload2" @click="submit" style="font-family:'黑体';margin-top:20px;margin-bottom:20px" type="primary">保存</el-button>
      </div>
    </div>
    <bottom></bottom>
  </div>
</template>

<script>
  import {mixin} from "../../minix";
  import {getFoodListById,getFoodTypeList,editFoodList,getFoodSchoolList,getFoodRestaurantBySchool} from '../../api/api'
  import top from '@/components/top'
  import bottom from '@/components/bottom'
  export default {
    mixins: [mixin],
    data() {
      return{
        type: [],
        fileList: [],
        dialogImageUrl: '',
        dialogVisible: false,
        form: {
          restId: "",
          schoolId: "",
          name: "",
          address: "",
          open: "",
          image: "",
          content: "",
          star: 0,
        },
        editorOption: {
          placeholder: "请输入文字内容",
          modules: { 
            toolbar: {
                container: [
                    ["bold", "italic", "underline", "strike"], 
                    ["blockquote", "code-block"], 
                    [{ header: 1 }, { header: 2 }], 
                    [{ list: "ordered" }, { list: "bullet" }], 
                    [{ script: "sub" }, { script: "super" }], 
                    [{ indent: "-1" }, { indent: "+1" }], 
                    [{ direction: "rtl" }], 
                    [{ size: ["small", false, "large", "huge"] }], 
                    [{ header: [1, 2, 3, 4, 5, 6, false] }], 
                    [{ color: [] }, { background: [] }], 
                    [{ font: [] }], [{ align: [] }], 
                    ["clean"], ["image"]
                ],
                handlers: {
                    'image': function ( value ) {
                        if ( value ) {
                            // 触发上传插件
                            document.querySelector('.Quill-uploader .el-upload__input').click()
                        } else {
                            this.quill.format( 'image', false );
                        }
                    }
                }
            },
            syntax: { 
                highlight: text => { 
                    return hljs.highlightAuto(text).value; // 这里就是代码高亮需要配置的地方 
                }
            }
          }
        },
        rules: {
          schoolId: [
            { required: true, message: '请选择学校', trigger: 'blur' },
          ],
          restId: [
            { required: true, message: '请选择餐厅', trigger: 'blur' },
          ],
          typeId: [
            { required: true, message: '请选择类型', trigger: 'blur' },
          ],
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' },
          ],
          address: [
            { required: true, message: '请输入窗口', trigger: 'blur' },
          ],
          open: [
            { required: true, message: '请输入营业时间', trigger: 'blur' },
          ],
          image: [
            { required: true, message: '请上传图片', trigger: 'blur' },
          ],
          content: [
            { required: true, message: '请输入内容', trigger: 'blur' },
          ],
          star: [
            { required: true, message: '请选择评分', trigger: 'blur' },
          ],
        },
        school: [],
        restaurant: [],
      }
    },
    components: {
        top,
        bottom,
    },
    methods: {
      getFoodTypeList() {
        getFoodTypeList().then(res => {
          if (res.code == 1000) {
            this.type = res.data
          }
        })
      },
      changeSchool(val) {
        getFoodRestaurantBySchool({school: val}).then(res => {
          if (res.code == 1000) {
            this.restaurant = res.data
          }
        })
      },
      handleQillSuccess(res){
          let _this = this;
          if(res.code == 1000){
              _this.$notify({
                  title: '上传成功',
                  type: 'success'
              });
              let imgurl = this.$store.state.HOST + res.message
              let quill = this.$refs.myQuillEditor.quill
              let position = quill.getSelection().index
              quill.insertEmbed(position, 'image', imgurl)
              quill.setSelection(position + 1)
          }else{
              _this.$notify({
                  title: '上传失败',
                  type: 'error'
              });
          }
      },
      handleAvatorSuccess(res) {
        let _this = this;
        if(res.code == 1000){
            _this.$message({
              type: 'success',
              message: '上传成功!'
            });
            this.fileList.push({url:this.$store.state.HOST + res.message})
        }else{
          _this.$notify.error({
            title: '错误',
            message: res.message
          });
        }
      },
      handleRemove(file, fileList) {
        this.fileList = fileList
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      getFoodSchoolList() {
          getFoodSchoolList().then(res => {
              if (res.code == 1000) {
                  this.school = res.data
              }
          })
      },
      submit() {
        var file = []
        for(let i = 0;i < this.fileList.length;i++) {
            file.push(this.fileList[i].url)
        }
        if (file.length > 0) {
            this.form.image = file.join(",")
        }
        this.form.restId = this.form.restId.join(",")
        this.$refs["ruleForm"].validate((valid) => {
          if (valid) {
            editFoodList(this.form).then(res => {
              if(res.code == 1000) {
                this.$notify.success({
                  title: '成功',
                  message: "保存成功,请等待管理员审核通过"
                });
                this.$router.push("/myShare")
              } else {
                this.$notify.error({
                  title: '错误',
                  message: res.message
                });
              }
            })
          } else {
            return false;
          }
        });
      },
      handleClose() {
        this.form = {
          restId: "",
          name: "",
          address: "",
          open: "",
          image: "",
          content: "",
          schoolId: "",
        },
        this.fileList = []
      },
      getFoodListById(id) {
          getFoodListById({id: id}).then(res => {
              if (res.code == 1000) {
                this.form = res.data
                this.form.state = res.data.state + ""
                var img = this.form.image.split(",")
                for(let i = 0;i<img.length;i++) {
                    var param = {
                        url: img[i]
                    }
                    this.fileList.push(param)
                }
                this.form.restId = this.form.restId.split(",")
                this.getFoodSchoolList()
                this.changeSchool(this.form.schoolId)
              }
          })
      },
    },
    created() {
     
    },
    mounted() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
      this.getFoodTypeList()
      var id = this.$route.query.id
      this.getFoodListById(id)
    }
 }
</script>

<style scoped>
@import url('../../assets/css/addShare.css');
.el-col {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 12px
}
.search-title {
    font-family: '黑体';
    float: right;
    white-space: nowrap;
    font-size: 14px;
    width: 84px;
    text-align: right;
}
.el-tree {
    border: 1px solid #BDC1C9;
}
</style>